<template>
  <div class="container-fluid login-bg" :style="{ background: background,color:color }">
    <div class="row justify-content-end login">
      <div class="login-page">
        <div class="login-con">
          <div class="text-center web-title">
            <h1>{{webInfo.siteName}}</h1>
          </div>
          <el-card>
            <div slot="header" class="clearfix">
              <div class="login-div">
                <i class="icon icon-log-in"></i><span class="login-span"> 欢迎登陆</span>
              </div>
            </div>
            <div>
              <el-form :model="authUser" ref="login" :rules="rules">
                <el-form-item prop="userName">
                  <el-input type="text" v-model="authUser.userName"
                            prefixIcon="icon icon-person"
                            placeholder="请输入用户名">
                  </el-input>
                </el-form-item>

                <el-form-item prop="password">
                  <el-input type="password" v-model="authUser.password"
                            prefixIcon="icon icon-locked"
                            placeholder="请输入密码" @keyup.enter.native="login">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="width: 100%" @click="login" :loading="loading">{{message}}
                  </el-button>
                </el-form-item>
                <div class="register-a" v-if="webInfo.openRegister=='1'">
                  <a href="/shop/register.html">免费注册</a>
                </div>
                <div v-if="webInfo.auths.otherAuths" class="other-login">
                  <span>其他登录方式:</span>
                  <h-qq-login v-if="webInfo.auths.qq"/>
                  <h-weixin-login v-if="webInfo.auths.weixin"/>
                </div>
              </el-form>
            </div>
          </el-card>

        </div>

        <div class="text-center copy-info">
          © 2018 技术支持: <a href="https://www.hwlcn.com">www.hwlcn.com</a> QQ:35107793
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import FrontService from 'src/service/front'
  import HQqLogin from 'src/components/common/login/HQqLogin'
  import HWeixinLogin from 'src/components/common/login/HWeixinLogin'
  import {mapState} from 'vuex'

  export default {
    name: 'AdminLogin',
    components: {HWeixinLogin, HQqLogin},
    comments: {HQqLogin, HWeixinLogin},
    data() {
      return {
        loading: false,
        authUser: {
          userName: '',
          password: '',
          type: 'customer'
        },
        message: '登录',
        rules: {
          userName: [
            {required: true, message: '请输入用户名称', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入用户密码', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapState(['webInfo']),
      background: function () {
        if (this.webInfo.bgImgs != null && this.webInfo.bgImgs.length > 0) {
          return 'url(' + this.webInfo.bgImgs[0].url + ') no-repeat center center fixed'
        } else {
          return "#334c80"
        }
      },
      color: function () {
        if (this.webInfo.bgColor != null) {
          return this.webInfo.bgColor;
        } else {
          return "inherit";
        }

      }
    },
    methods: {
      login: function () {
        const me = this
        this.$refs['login'].validate((valid) => {
          if (valid) {
            me.message = '正在登录...'
            me.loading = true
            FrontService.login(me.authUser).then(function (data) {
              if (data != null) {
                me.$message.success('登录成功!')
                setTimeout(function () {
                  window.location.href = '/shop/index.html'
                }, 600)
              }
              me.message = '登录'
              me.loading = false
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
